<!-- 
  Transition 组件的作用：
    控制单个元素或组件在进入或离开的时候应用上 css过渡或css动画效果。

  关键属性有哪些：
    name: 用于控制类名的前缀
    mode: 用于控制模式，主要使用 out-in
    appear: 用于是否默认触发一次进入动画
    duration: 
      用于显式的控制过渡或动画的时长，一般不用设置
      默认下 Vue 会根据元素的 
            css 的 过渡时长 transition
            css 的 动画时长 animation-duration
      当我们需要将过渡或动画的效果应用在子元素时设置
    enter-active-class
    leave-active-class
    enter-from-class
    enter-to-class
    leave-from-class
    leave-to-class
  
  与 Vue2 的区别：
    1. 类名的变化
      v-enter         =>      v-enter-from
      v-leave         =>      v-leave-from
    
    2. 与 RouterView 组件一起使用的改变

      <Transition>
        <RouterView />
      </Transition>

      =>

      <router-view v-slot="{ Component }">
        <transition name="fade">
          <component :is="Component" />
        </transition>
      </router-view>

 -->

<template>
  <div>
    <button @click="show = true">Open</button>

    <Transition name="drawer" :duration="{ enter: 500, leave: 500 }">
      <div class="drawer" v-if="show">
        <div class="drawer-mask" @click="show = false"></div>
        <div class="drawer-container"></div>
      </div>
    </Transition>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const show = ref(false)
</script>

<style lang="scss" scoped>
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: green;
  .drawer-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .drawer-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background-color: #fff;
  }
}

.drawer-enter-from,
.drawer-leave-to {
  .drawer-mask {
    opacity: 0;
  }
  .drawer-container {
    transform: translateX(-100%);
  }
}

.drawer-enter-active,
.drawer-leave-active {
  .drawer-mask {
    transition: opacity 0.3s ease;
  }

  .drawer-container {
    transition: transform 0.5s ease;
  }
}
</style>
